import { createStore } from 'vuex'
import moduleA from '@/store/moduleA.js'
import moduleB from '@/store/moduleB.js'
import user from '@/store/modules/user'
import cart from '@/store/modules/cart'
import category from '@/store/modules/category'
// 使用vuex-persistedstate插件来进行持久化,npm i vuex-persistedstate
import createPersistedstate from 'vuex-persistedstate'
export default createStore({
  state: {
    userName: 'zs',
    person: [
      { id: 1, name: 'tom', gender: '男' },
      { id: 2, name: 'lucy', gender: '女' },
      { id: 3, name: 'jack', gender: '男' }
    ]
  },
  mutations: {
    updateName (state) {
      state.userName = 'sz' + 1
    }
  },
  actions: {
    updateName (ctx) {
      setTimeout(() => {
        ctx.commit('updateName')
      }, 1000)
    }
  },
  modules: {
    a: moduleA,
    b: moduleB,
    user,
    cart,
    category
  },
  getters: {
    newName (state) {
      return state.userName + '!!!'
    },
    boys: (state) => {
      return state.person.filter(p => p.gender === '男')
    }
  },
  plugins: [
    // ===> 默认是存储在localStorage中
    // ===> key是存储数据的键名
    // ===> paths是存储state中的那些数据，如果是模块下具体的数据需要加上模块名称，如user.token
    // ===> 修改state后触发才可以看到本地存储数据的的变化。
    createPersistedstate({
      key: 'erabbit-client-pc-store',
      paths: ['user', 'cart']
    })
  ]
})

// vue3使用createStore创建store
// vue 2 使用 new Vuex.store创建store
// import Vue from 'vue'
// import Vuex from 'vuex'
// Vue.use(Vuex)
// export default new Vuex.Store({
//     state: {},
//     mutations: {},
//     actions: {},
//     modules: {},
//     getters: {}
// })
